<!-- 
*   @Description:家属信息录入
*   @Author:lxy
*   @Date:2023-03-23 10:23
-->
<template>
  <div>
    <!-- <TableTemplate v-bind="tableConfig"></TableTemplate> -->
    <el-table :data="elTableListData" style="width: 100%">
      <!-- 序列号 -->
      <el-table-column type="index" label="序号" minWidth="20" align="center">
        <template #default="scope">
          <span> {{ 0 + scope.$index + 1 }} </span>
        </template>
      </el-table-column>
      <el-table-column prop="familyName" label="家属姓名" >
        <template slot-scope="scope">
          <template>
            <el-input type="text" v-model="scope.row.familyName"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="familySex" label="性别">
        <template slot-scope="scope">
          <template>
            <el-input type="text" v-model="scope.row.familySex"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="familyAge" label="年龄" >
        <template slot-scope="scope">
          <template>
            <el-input type="text" v-model="scope.row.familyAge"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="familyDuties" label="职务" >
        <template slot-scope="scope">
          <template>
            <el-input type="text" v-model="scope.row.familyDuties"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="familyIDCard" label="身份证号">
        <template slot-scope="scope">
          <template>
            <el-input type="text" v-model="scope.row.familyIDCard"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="familyMobilePhone" label="联系方式">
        <template slot-scope="scope">
          <template>
            <el-input
              type="text"
              v-model="scope.row.familyMobilePhone"
            ></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="familyAdress" label="家庭住址" >
        <template slot-scope="scope">
          <template>
            <el-input type="text" v-model="scope.row.familyAdress"></el-input>
          </template>
        </template>
      </el-table-column>
      <el-table-column prop="familyRelationship" label="关系">
        <template slot-scope="scope">
          <template>
            <el-input
              type="text"
              v-model="scope.row.familyRelationship"
            ></el-input>
          </template>
        </template>
      </el-table-column>
      <!-- 渲染操作按钮 -->
      <el-table-column label="操作">
        <template slot-scope="scope">
          <template>
            <el-tag
              v-if="elTableListDataLength > 1"
              type="danger"
              style="cursor: pointer; user-select: none"
              @click="($event) => dangerClickHandler(scope.row)"
            >
              删除
            </el-tag>
            <el-tag
              type="info"
              v-else
              style="cursor: not-allowed; user-select: none"
              >删除</el-tag
            >
          </template>
        </template>
      </el-table-column>
    </el-table>
    <el-button
      class="addButtonClass"
      @click="addClickHandler"
      :disabled="addButtonDisable"
    >
      新增家属
    </el-button>
    <span class="tishiClass" v-show="addButtonDisable">
        注：最多只能添加六位家属信息
    </span>
  </div>
</template>

<script>
import TableTemplate from "@/components/TableTemplate.vue";
import _ from "lodash";
export default {
  name: "familyInformation",
  components: {
    TableTemplate,
  },
  data() {
    return {
      elTableListData: [
        {
          key: this.algorithm(),
          familyName: "",
          familySex: "",
          familyAge: "",
          familyDuties: "",
          familyIDCard: "",
          familyMobilePhone: "",
          familyAdress: "",
          familyRelationship: "",
        },
      ],
      elTableListDataLength: 1,
      addButtonDisable: false,
    };
  },
  methods: {
    //添加一位家属信息
    addClickHandler() {
      let dataObj = {
        key: this.algorithm(),
        familyName: "",
        familySex: "",
        familyAge: "",
        familyDuties: "",
        familyIDCard: "",
        familyMobilePhone: "",
        familyAdress: "",
        familyRelationship: "",
      };
      this.elTableListData.push(dataObj);
      this.elTableListDataLength = this.elTableListData.length;
    },
    //删除指定用户信息
    dangerClickHandler(data) {
      if (this.elTableListDataLength == 1) {
        this.$notify.warning({
          title: "错误",
          message: "最少需录入一条家属信息",
        });
        return;
      }
      for (var i = 0; i < this.elTableListData.length; i++) {
        if (this.elTableListData[i].key == data.key) {
          this.elTableListData.splice(i, 1);
          this.elTableListDataLength = this.elTableListData.length;
          return;
        }
      }
    },
    //外部调用
    outFunction() {
      try {
        this.elTableListData.forEach((item) => {
          if (item.familyName == "") throw new Error("请完善家属姓名");
          if (item.familySex == "") throw new Error("请完善家属性别");
          if (item.familyAge == "") throw new Error("请完善家属年龄");
          if (item.familyDuties == "") throw new Error("请完善家属职务");
          if (item.familyIDCard == "") throw new Error("请完善家属身份证号");
          if (item.familyMobilePhone == "") throw new Error("请完善家属联系方式");
          if (item.familyAdress == "") throw new Error("请完善家属家庭住址");
          if (item.familyRelationship == "") throw new Error("请完善与家属的关系");
        });
        return { data: this.elTableListData, zt: true };
      } catch (e) {
        this.$notify.warning({ title: "错误", message: e });
        return { data: "", zt: false };
      }
    },
    //生成唯一id
    algorithm() {
      let abc = [
        "a",
        "b",
        "c",
        "d",
        "e",
        "f",
        "g",
        "h",
        "i",
        "g",
        "k",
        "l",
        "m",
        "n",
        "o",
        "p",
        "q",
        "r",
        "s",
        "t",
        "u",
        "v",
        "w",
        "x",
        "y",
        "z",
      ];
      let [max, min] = [
        Math.floor(Math.random() * (10 - 7 + 1) + 1),
        Math.floor(Math.random() * (17 - 10 + 1) + 17),
      ];
      abc = abc
        .sort(() => 0.4 - Math.random())
        .slice(max, min)
        .slice(0, 8)
        .join("");
      var a = new Date().getTime() + abc;
      return a;
    },
  },
  watch: {
    elTableListDataLength(newVal) {
      this.addButtonDisable = newVal > 5 ? true : false;
    },
  },
};
</script>

<style scoped lang="less">
/deep/.el-input__inner {
  height: 30px !important;
}
.addButtonClass {
  margin: 20px 0px 10px 10px;
}
.tishiClass {
  position: relative;
  bottom: -3px;
  margin-left: 10px;
  font-size: 12px;
  // background-color: aqua;
  color: rgba(252, 45, 45, 0.8);
}
</style>
